/*
 * @Author: herw
 * @Date: 2020-11-21 17:43:52
 * @Last Modified by: herw
 * @Last Modified time: 2020-11-26 13:35:27
 */
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.name"
          clearable
          placeholder="输入名称搜索"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!--表格渲染-->
    <el-row v-loading="crud.loading">
      <el-col v-for="row in crud.data" :key="row.id" :span="12">
        <div
          class="filter-container"
          style="margin-right: 3px; margin-bottom: 3px"
        >
          <el-card>
            <div slot="header" class="clearfix">
              <span>{{ row.name }}-v{{ row.version }}</span>
              <div style="position: relative; text-align: right">
                <el-button
                  type="primary"
                  size="mini"
                  @click="image(row.id)"
                >流程图</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="startInstance(row)"
                >发起流程</el-button>
              </div>
            </div>
            <div class="text item">
              {{ row.description ? row.description : '无描述' }}
            </div>
            <div class="text item">
              {{ row.category ? row.category : '无命名空间' }}
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <!--分页组件-->
    <pagination />

    <el-dialog
      ref="processImage"
      title="流程图"
      :visible.sync="dialogImageVisible"
      fullscreen
      width="80%"
    >
      <img :src="imagePath" alt="流程图">
    </el-dialog>

    <start-process
      v-if="dialogStartInstanceVisible"
      ref="startProcess"
      :visible.sync="dialogStartInstanceVisible"
      :process-definition="processDefinition"
    />
  </div>
</template>

<script>
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import { image } from '@/api/flowable/definition'
import startProcess from '../components/StartProcess'

export default {
  name: 'FlowableStartMyProcess',
  components: { startProcess, pagination, crudOperation, rrOperation },
  cruds() {
    return CRUD({ title: '发起流程', url: 'api/flowable/definition/startableUser' })
  },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      imagePath: '',
      processDefinitionId: '',
      dialogImageVisible: false,
      dialogStartInstanceVisible: false,
      processDefinition: undefined,
      permission: {
        add: ['admin', 'definition:add'],
        edit: ['admin', 'definition:edit'],
        del: ['admin', 'definition:del']
      }
    }
  },
  created() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: false
    }
  },
  methods: {
    image(processDefinitionId) {
      image(processDefinitionId).then(res => {
        this.imagePath = 'data:image/png;base64,' + res
      }).catch(err => {
        console.log('error:' + err.response.data.message)
      })
      this.dialogImageVisible = true
    },
    startInstance(row) {
      this.processDefinition = row
      this.dialogStartInstanceVisible = true
    }
  }
}
</script>
